<template>
  <div class="shopInfo-container">
    <transition
      @before-enter="beforeEnter"
      @enter="enter"
      @after-enter="afterEnter">
      <div v-if="ballFlag" class="ball" ref="ball"></div>
    </transition>
    <!-- 轮播图区域 -->
    <div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<Swipe :swipeList="swipeList"/>
					</div>
				</div>
			</div>
      <!-- 商品信息 -->
      <div class="mui-card shop-msg">
				<div class="mui-card-header"><h4>{{ shopInfo.thtle }}</h4></div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p class="price">
              市场价：<del>￥{{ shopInfo.old_price }}</del>&nbsp;&nbsp;
              销售价：<span class="now-price">￥{{ shopInfo.now_price }}</span>
            </p>
            <div class="shop-num">
              <span>购买数量：</span>
              <div class="mui-numbox" data-numbox-min='1' :data-numbox-max='shopInfo.num'>
					      <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
					      <input id="test" class="mui-input-numbox" type="number" value="1" ref="num" @change="getNum()"/>
					      <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
				      </div>
            </div>
					</div>
          <div class="btn">
            <mt-button type="primary" size="small">立即购买</mt-button>
            <mt-button type="danger" size="small" @click="goCar()">加入购物车</mt-button>
          </div>
				</div>
			</div>
      <!-- 商品参数 -->
      <div class="mui-card">
				<div class="mui-card-header"><h4>商品参数</h4></div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p>商品货号：{{ shopInfo.product_code }}</p>
            <p>库存情况：{{ shopInfo.num }}件</p>
            <p>上架时间：{{ shopInfo.add_time }}</p>
					</div>
				</div>
        <div class="mui-card-footer">
          <mt-button type="primary" size="large" plain @click="pushImg(shopInfo.id)">图文介绍</mt-button>
          <br>
          <mt-button type="danger" size="large" plain @click="pushComment(shopInfo.id)">商品评论</mt-button>
        </div>
			</div>
  </div>
</template>
<script>
import Swipe from '../../components/swipe.vue'
import mui from '../../libs/mui/js/mui.js'
import {Toast} from 'mint-ui'
export default {
  data(){
    return {
      swipeList:[],//轮播图
      shopInfo:{},//商品详情
      ballFlag:false,
      num:1//购买数量
    }
  },
  components:{
    Swipe
  },
  methods:{
    async getSwipeList(){
      let data =await this.ajax.get(`/api/pic/shopInfo_${this.$route.params.id}`);
      this.swipeList=data.data
    },
    async getShopInfo(){
      let data=await this.ajax.get(`/api/shopInfo/${this.$route.params.id}`)
      this.shopInfo=data.data[0]
    },
    pushImg(id){
      this.$router.push(`/home/shopInfo/img/${id}`)
    },
    pushComment(id){
      this.$router.push(`/home/shopInfo/comment/${id}`)
    },

    // 加入购物车函数
    goCar(){
      if(!localStorage.getItem('token')){
        Toast("请先登录")
        return
      }
      this.ballFlag=!this.ballFlag
      let car={
        id:this.$route.params.id,
        num:this.num,
        price:this.shopInfo.now_price,
        title:this.shopInfo.title,
        img_url:this.shopInfo.img_url,
        count:this.shopInfo.num,
        slected:true
      }
      this.$store.commit('setCar',car)
    },
    //获取购买数量
    getNum(){
      this.num=this.$refs.num.value
    },


    beforeEnter(el){
      el.style.tansform="tanslate(0,0)"
    },
    enter(el,done){
      el.offsetWidth
      let carPosition=document.getElementById('car').getBoundingClientRect()
      let ballPosition=this.$refs.ball.getBoundingClientRect()
      let x=carPosition.x-ballPosition.x
      let y=carPosition.y-ballPosition.y
      el.style.transform = `translate(${x}px, ${y}px)`
      el.style.transition = 'all 02s ease'
      done()
    },
    afterEnter(el){
      this.ballFlag = !this.ballFlag
    }
  },
  created(){
    this.getSwipeList()
    this.getShopInfo()
  },
  mounted(){
    mui(".mui-numbox").numbox()
  }
}
</script>

<style lang="less" scoped>
.shopInfo-container{
  background-color: #DDD;
  overflow: hidden;
  .shop-msg{
    .price{
      color: black;
      .now-price{
        color:red;
        font-size: 18px;
        font-weight: bold;
      }
    }
    .btn{
      padding:0 20px 20px 20px;
    }
  }
  .mui-card-footer{
    display: block;
  }
  .ball{
    width: 15px;
    height: 15px;
    background-color: red;
    position: absolute;
    z-index: 999;
    border-radius: 50%;
    left: 152px;
    top: 390px;
  }
}
</style>